<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>幸运水果机(老虎机)</title>
</head>
<link rel="stylesheet" href="css/css.css">

<body>
  <div id="app">
    <div class="box">
      <div class="box_modle">
        <div class="box_addMoney">
          <div class="box_addMoney_num">
            <img class="box_addMoney_img" src="images/money.png">x {{money}}
          </div>
          <div @click="castMoney" class="box_addMoney_box">
            <div class="box_addMoney_text">投币</div>
            <img class="box_addMoney_btn" src="images/touzhu.png">
          </div>
        </div>
        <img v-if="introduce===0" @click="introduceBlock" class="box_introduce_show" src="images/block.png">
        <div v-if="introduce===1" class="box_introduce">
          <img @click="introduceNone" class="box_introduce_close" src="images/close.png">
          <div class="box_introduce_modle box_introduce_name">游戏介绍</div>
          <div class="box_introduce_modle">1.点击右上角投币 1硬币=10积分</div>
          <div class="box_introduce_modle">2.点击或长按最下方区域不同牌对应的红色按钮进行下注 下注一次扣除1积分</div>
          <div class="box_introduce_modle">3.下注完毕之后点击play按钮即可开始一轮游戏</div>
          <div class="box_introduce_modle">4.开始一轮游戏之后如果当前分数大于等于上一轮分数可以不用投注直接点击play按钮按照上一轮投注开始新的一轮游戏</div>
          <div class="box_introduce_modle box_introduce_name">中奖介绍</div>
          <div class="box_introduce_modle">1.游戏开始后红色方块选中区域即为中奖</div>
          <div class="box_introduce_modle">2.奖励倍数 BARx50丶小BARx25丶双星x20丶双七x20丶西瓜x20丶柠檬x10丶橘子x10丶铃铛x10丶苹果x5(除小BAR外
            其他小奖品均为x2)</div>
          <div class="box_introduce_modle box_introduce_name">特别奖励</div>
          <div class="box_introduce_modle">1.大三元: 双星丶双七丶西瓜</div>
          <div class="box_introduce_modle">2.小三元: 柠檬丶橘子丶铃铛</div>
          <div class="box_introduce_modle">3.小四喜: 苹果x4</div>
          <div class="box_introduce_modle">4.开火车: 随机3到10格中奖相连区域</div>
          <div class="box_introduce_modle">5.大满贯: 所有下注牌均中奖</div>
          <div class="box_introduce_modle">联系我们:qq549296319</div>
        </div>
        <div class="view">
          <div class="view_top">
            <div class="view_modle">
              <img :src='boxMsg[0].img' class="view_modle_img">
              <div v-if="boxMsg[0].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[1].img' class="view_modle_img">
              <div v-if="boxMsg[1].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[2].img' class="view_modle_img">
              <div v-if="boxMsg[2].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[3].img' class="view_modle_img">
              <div v-if="boxMsg[3].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[4].img' class="view_modle_img">
              <div v-if="boxMsg[4].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[5].img' class="view_modle_img">
              <div v-if="boxMsg[5].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[6].img' class="view_modle_img">
              <div v-if="boxMsg[6].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
          </div>
          <div class="view_right">
            <div class="view_modle">
              <img :src='boxMsg[7].img' class="view_modle_img">
              <div v-if="boxMsg[7].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[8].img' class="view_modle_img">
              <div v-if="boxMsg[8].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[9].img' class="view_modle_img">
              <div v-if="boxMsg[9].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[10].img' class="view_modle_img">
              <div v-if="boxMsg[10].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[11].img' class="view_modle_img">
              <div v-if="boxMsg[11].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
          </div>
          <div class="view_bottom">
            <div class="view_modle">
              <img :src='boxMsg[18].img' class="view_modle_img">
              <div v-if="boxMsg[18].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[17].img' class="view_modle_img">
              <div v-if="boxMsg[17].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[16].img' class="view_modle_img">
              <div v-if="boxMsg[16].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[15].img' class="view_modle_img">
              <div v-if="boxMsg[15].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[14].img' class="view_modle_img">
              <div v-if="boxMsg[14].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[13].img' class="view_modle_img">
              <div v-if="boxMsg[13].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[12].img' class="view_modle_img">
              <div v-if="boxMsg[12].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
          </div>
          <div class="view_left">
            <div class="view_modle">
              <img :src='boxMsg[23].img' class="view_modle_img">
              <div v-if="boxMsg[23].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[22].img' class="view_modle_img">
              <div v-if="boxMsg[22].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[21].img' class="view_modle_img">
              <div v-if="boxMsg[21].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[20].img' class="view_modle_img">
              <div v-if="boxMsg[20].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
            <div class="view_modle">
              <img :src='boxMsg[19].img' class="view_modle_img">
              <div v-if="boxMsg[19].active==='1'" :class="chooseColor===1?'view_modle_active':'view_modle_active_c1'">
              </div>
            </div>
          </div>
          <div class="view_center">
            <div class="view_center_msg">
              <div class="view_center_modle">{{runMsg}}</div>
              <div class="view_center_modle">{{grades}}</div>
            </div>
            <div v-if="prizeName!=''" class="view_center_modle prizeName_color">{{prizeName}}</div>
            <img v-if="state===0" @click="begin" class="view_center_btn" src="images/statr.png">
            <img v-if="state===1" class="view_center_btn_z" src="images/statr_z.png">
          </div>
        </div>
        <div class="click">
          <div v-for="(item,index) in clickMsg" class="view_modle click_block">
            <div class="click_modle">
              <div v-if="item.tz!=0" class="click_mengceng">{{item.tz}}</div>
              <img :src='item.img' class="view_modle_img">
            </div>
            <div class="click_box">
              <div @click="addMoney(index)" @mousedown="addMoneyLongTime(index)" @mouseup="clearTimer()"
                @mouseleave="clearTimer()" class="click_btn"></div>
              <img class="click_img" src="images/touzhu.png">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="alertMsg!=''" class="pageAlert"><img class="pageAlert_img" src="images/alert.jpg">
      <img @click="alertClose" class="pageAlert_close" src="images/close.png">
      <div class="pageAlert_text">{{alertMsg}}</div>
    </div>
  </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script src="js/js.js"></script>

</html>